<template>
  <DetailBox :title="getRouteTitle()" :border="2">
    <template #center>
      <slot name="center">
        <ContentBox :border="3" :marginHeight="192">
          <template #center>
            <slot name="center">
              <TableSearch class="searchBox" :resetClearInitVale="true" :listForm="listForm.list"
                           @searchHandler='searchHandler' @resetHandler="resetHandler">
                <template #status="slotProps">
                  <el-form-item :label="slotProps.item.label">
                    <el-radio-group
                        v-model="slotProps.row[slotProps.item.keyName]"
                        @change="changView">
                      <!--        此处应是动态，从数据字典中取              -->
                      <el-radio-button v-for="item in viewList.list" :key="item.value" :label="item.label"
                                       :value="item.value"/>
                    </el-radio-group>
                  </el-form-item>
                </template>
              </TableSearch>

              <div id="external-draggable-element" draggable="true">拖动我</div>
              <ZGantt :gantt-data="tasks" :gantt-config="config" :templates-config="templatesConfig"
                         :date-type="dataType" :margin-height="400"/>

              <el-pagination class="tablePagination"
                             background
                             v-model:currentPage="currentPage" :page-size="pageSize"
                             :page-sizes="[10, 15, 30, 45]"
                             layout="prev, pager, next,sizes," :total="total" @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"></el-pagination>

            </slot>
          </template>
        </ContentBox>
      </slot>
    </template>
  </DetailBox>

</template>
<script lang="ts" setup>
// import { getArticleList } from '@/api/article'
import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";

import {reactive, ref} from "vue";
import ZGantt from "@/views/components/gantt/dhtmlx-gantt/ZGantt.vue";
import {GanttConfig} from "@/views/components/gantt/dhtmlx-gantt/ZGantt.vue";
import TableSearch, {FormDataItem} from "@/views/components/table/tableSearch/index.vue";
import {getRouteTitle} from "@/utils";

interface ListFormType {
  list: FormDataItem[]
}

const listForm: ListFormType = reactive({
  list: [
    {
      label: '项目名称',
      type: 'el-input',
      keyName: 'projectNumber',
      placeholder: '请输入',
      span: 4
    },
    {
      label: '项目成员',
      type: 'el-input',
      keyName: 'dutyLeader',
      placeholder: '请输入',
      span: 4
    },
    {
      label: '视图切换',
      keyName: 'status',
      slotName: 'projectStatusCode',
      default: 'year', // 回填的值
      span: 20
    },

  ],
});

const searchHandler = (searchBack) => {
  console.log(searchBack);
};

const resetHandler = (backMess) => {
  console.log(backMess)
}

const viewList = reactive({
  list: [
    {
      value: 'year',
      label: '年'
    },
    {
      value: 'month',
      label: '月'
    },
    {
      value: 'day',
      label: '日'
    }
  ]
})

const dataType: string = ref('year')

const changView = (val: any) => {
  console.log(val)
  dataType.value = val
}

const currentPage = ref<number>(1) //当前页
const pageSize = ref<number>(10) //每页大小
const total = ref<number>(0) //总条数

// 分页相关
/**
 * @desc:设置显示条数
 * @param {number} size 显示条数
 */
const handleSizeChange = (size: number) => {
  pageSize.value = size
}
/**
 * @desc:设置当前页数
 * @param {number} page 页数
 */
const handleCurrentChange = (page: number) => {

  currentPage.value = page
}



const tasks = reactive({
  data: [

    {
      id: 1,
      text: 'DFB24019',
      progress: 0.8, //完成度
      start_date: '2023-10-16', //开始时间 日月年
      end_date: '2024-10-15',
      projectStatus: '',
      status: '进行中',
      open: true, //默认打开=
      number: '', //显示字段
      person: 'XX牛马',
      post: 'BA',
      department: '数字化一部',
      task: '0/20'
    },
    {
      // toolTipsTxt: '任务#101-001',
      id: 21, //任务id
      text: '任务1的撒的防守打法士大夫', //任务名称
      start_date: '2023-10-16', //开始时间 日月年
      end_date: '2023-12-26',
      parent: 1, //父级id
      person: '2号牛马',
      progress: 1, //完成度
      open: true, //默认打开
      status: '已完成',
    },
    {
      // toolTipsTxt: '任务#101-001',
      id: 22, //任务id
      text: '第二个逾期阶段', //任务名称
      start_date: '2023-12-16', //开始时间 日月年
      end_date: '2024-01-26',
      parent: 1, //父级id
      progress: 1, //完成度
      person: '2号牛马',
      open: true, //默认打开
      status: '逾期'
    },
    {
      // toolTipsTxt: '任务#101-001',
      id: 23, //任务id
      text: '第三个进行中阶段', //任务名称
      start_date: '2024-01-20', //开始时间 日月年
      end_date: '2024-03-03',
      parent: 1, //父级id
      progress: 0.7, //完成度
      person: '2号牛马',
      open: true, //默认打开
      status: '进行中'
    },
    {
      id: 2,
      text: 'DFB45113',
      progress: 0.7, //完成度
      start_date: '2023-10-16', //开始时间 日月年
      projectStatus: '已完成',
      end_date: '2024-10-15',
      open: true, //默认打开
      number: '哈哈哈' //显示字段
    },
    {
      // toolTipsTxt: '任务#101-001',
      id: 11, //任务id
      text: '项目启动阶段', //任务名称
      start_date: '2024-04-06', //开始时间 日月年
      end_date: '2024-06-06',
      parent: 2, //父级id
      progress: 1, //完成度
      open: true, //默认打开
      status: '已完成'
    },
    {
      // toolTipsTxt: '任务#101-001',
      id: 12, //任务id
      text: '设计阶段', //任务名称
      start_date: '2024-04-20', //开始时间 日月年
      end_date: '2024-06-26',
      parent: 2, //父级id
      progress: 0.9, //完成度
      open: true, //默认打开
      status: '进行中'
    },
    {
      // toolTipsTxt: '任务#101-001',
      id: 13, //任务id
      text: '采购阶段', //任务名称
      start_date: '2024-05-14', //开始时间 日月年
      end_date: '2024-07-26',
      parent: 2, //父级id
      progress: 1, //完成度
      open: true, //默认打开
      status: '未开始'
    },
    {
      id: 99,
      text: "子任务1",
      start_date: "2024-04-02",
      duration: 100,
      progress: 1,
      parent: 1,
      dependency: "1SS" // 表示以主任务的开始为准
    },
    {
      id: 100,
      text: "子任务2",
      start_date: "2024-04-05",
      duration: 20,
      progress: 0.5,
      parent: 1,
      dependency: "2SS" // 表示有2天的延迟
    }
  ],

  // 任务之间连接线，目前注释掉了，需要的话打开
  links: [
    {id: '10', source: '11', target: '12', type: '1'},
    {id: '11', source: '11', target: '13', type: '1'},
    {id: '12', source: '11', target: '14', type: '1'},
    {id: '13', source: '11', target: '15', type: '1'},
    {id: '14', source: '23', target: '16', type: '0'},
    {id: '15', source: '13', target: '17', type: '1'},
    {id: '16', source: '17', target: '18', type: '0'},
    {id: '17', source: '18', target: '19', type: '0'},
    {id: '18', source: '19', target: '20', type: '0'},
    {id: '19', source: '15', target: '21', type: '2'},
    {id: '20', source: '15', target: '22', type: '2'},
    {id: '21', source: '15', target: '23', type: '0'}
  ]
})

const config: GanttConfig = reactive({
  autosize: false,
  readonly: false,
  show_grid: true,
  scale_height: 50,
  bar_height: 26,
  row_height: 32,
  xml_date: '%Y-%m-%d %H:%i',
  columns: [
    {
      name: 'text', label: '项目名称', tree: true, width: '200', align: 'left', template: (task) => {
        if (task.parent) {
          return task.text
        } else {
          return `<div style="font-weight: 700">${task.text}</div>`
        }
      }
    },
    {name: 'person', label: '项目成员', width: '100', align: 'center'},
    // { name: 'post', label: '岗位名称', width: '100', align: 'center' },
    // { name: 'department', label: '部门名称', width: '100', align: 'center' },
    {name: 'task', label: '项目任务', width: '100', align: 'center'},
    // { name: 'number', label: '工单号', tree: false, width: '120', align: 'center', },
    // {
    // 	name: 'duration',
    // 	label: '工期',
    // 	align: 'center',
    // 	template: function(obj) {
    // 		return obj.duration + '天';
    // 	}
    // },
    // {name:"start_date", label:"开始时间", align: "center" },
    // {name:"end_date",   label:"结束时间",   align: "center" },
    {name:"add",   label:"" },
  ],
  fit_tasks: true,
  drag_project: false,
  drag_resize: false,
  drag_move: false,
  drag_progress: false,
  drag_column_width: false,
  drag_tasks: false,
  details_on_create: false,
  sort: true, // 点击头部排序
  order_branch: true,
  order_branch_free: true,
  // drag_mode: {
  //   move: true,
  //   resize: true,
  //   create: true // 开启创建模式
  // }
  drag_n_drop: true,
})

const templatesConfig = {
  task_class: (start, end, item) => {
    switch (item.status) {
      case '已完成':
        return 'gantt_success';
      case '未开始':
        return 'gantt_begined';
      case '进行中':
        return 'gantt_primary';
      case '暂停':
        return 'gantt_warning';
      default:
        return 'gantt_info';
    }
  },
}

// setTimeout(()=>{
//   tasks.data = []
//   tasks.links = []
// }, 3000)
</script>
<style lang="scss">

</style>
